<template>
  <div class="hot-nav">
    <template>
      <div class="navbar" v-for="(child, index) in children.children" :key="index">
        <div class="nav-img" v-if="child.type='mFunction'"><img :src=" child.model.icon " alt=""></div>
        <div class="nav-title" v-if="child.type='mFunction'">{{child.model.title}}</div>
      </div>
     
    </template>
  </div>
</template>

<script>
export default {
  props: ["children"],
};
</script>

<style lang="less" scoped>
.hot-nav{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    align-content: center;
    margin: 10px 0;
    .navbar{
        
        .nav-img{
            img{
                width: 50px;
            }
        }
        .nav-title{
            font-size: 13px;
            text-align: center;
        }
    }
}
</style>